<template>
  <div id="index">
    <!--<top-header/>-->
    <div id="content">
      <left/>
      <div class="mr">
        <router-view/>
        <right/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    Component,
    Emit, Inject, Model,
    Prop, Provide, Vue, Watch
  } from 'vue-property-decorator'

  import topHeader from './header/index.vue'
  import left from '../pages/content/left.vue'
  import right from '../pages/content/right.vue'

  @Component({
    components: {
      topHeader,
      left,
      right
    }
  })
  export default class app extends Vue {
    name = "index";
  }
</script>

<style lang="scss">
  @import "../assets/scss/index";
  #index {
    min-height: 100%;
  }
  .big-area {
    margin-top: 0;
    padding-bottom: 10px;
    width: 100%;
    overflow: hidden;
    .title {
      margin: 5px 0;
      text-align: center;
    }
    .data-list {
      .data-item {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        margin-left: 5px;
        color: #888;
        display: block;
        &:hover {
          color: #000;
        }

        .auther {
          display: inline-block;
          width: 64px;
          white-space: nowrap;
          overflow-x: hidden;
          text-overflow: ellipsis;
          vertical-align: bottom;
        }
      }
    }
  }

  .liuyan {
    @extend .big-area;
  }

  .hot-article {
    margin-top: 0 !important;
    @extend .big-area;
  }

  .flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #index, #content {
    position: relative;
    margin: 0 auto;
    background: #e5e9f2;
  }

  #content {
    width: $theme-width;
    display: flex;
    flex-direction: row;
    .mr {
      background: #fff;
      margin: 15px 0 20px 200px;
      display: flex;
      flex-direction: row;
      /*min-height: calc(100vh - 35px);*/
      /*padding-bottom: 20px;*/
    }
  }

  .radius-top {
    border-radius: 5px 5px 0 0
  }

  .radius-bottom {
    border-radius: 0 0 5px 5px
  }

  ::selection {
    background-color: #000;
    color: #fff;
  }

  /* 平板 */
  @media screen and (min-width: 768px) {

  }

  /* 手机 */
  @media screen and (max-width: 767px) {

  }
</style>
